<template>
    <div>
        <el-dialog :title="type == 'add' ? '新增' : '修改'" :visible.sync="isShow" width="60%">


            <!-- 表格 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基础配置" name="first">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="名称" prop="goodsname">
                            <el-input v-model="ruleForm.goodsname"></el-input>
                        </el-form-item>
                        <el-form-item label="一级分类">
                            <el-select v-model="ruleForm.first_cateid" @change="firstChange" placeholder="请选择一级分类">
                                <el-option v-for="(menu, index) in firstList" :key="index" :label="menu.catename"
                                    :value="menu.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级分类">
                            <el-select v-model="ruleForm.second_cateid" placeholder="请选择二级分类">
                                <el-option v-for="(menu, index) in secondList" :key="index" :label="menu.catename"
                                    :value="menu.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="price">
                            <el-input v-model="ruleForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="市场价格" prop="market_price">
                            <el-input v-model="ruleForm.market_price"></el-input>
                        </el-form-item>

                        <el-form-item label="图片">
                            <!-- action 上传的地址 -->
                            <!-- limit 上传的数量限制 -->
                            <!-- on-exceed 超出限制时执行的函数 -->
                            <!-- auto-upload 自动上传 这里的接口是所有数据一起上传 所以关闭自动上传 -->
                            <!-- on-change 文件变化时的钩子 -->
                            <!-- file-list 历史文件的列表 -->
                            <el-upload action="#" list-type="picture-card" :limit="3" :on-exceed="handleExceed"
                                :auto-upload="false" :on-remove="handleRemove" :on-change="handleChange"
                                :file-list="fileList">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>

                        <el-form-item label="商品规格编号" prop="sepcsid">
                            <el-input v-model="ruleForm.specsid"></el-input>
                        </el-form-item>
                        <el-form-item label="商品规格属性" prop="sepcsattr">
                            <el-input v-model="ruleForm.specsattr"></el-input>
                        </el-form-item>
                        <el-form-item label="新品热门" prop="ishot">
                            <el-radio-group v-model="ruleForm.ishot">
                                <el-radio :label="1">最热</el-radio>
                                <el-radio :label="2">新品</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="新品" prop="isnew">
                            <el-radio-group v-model="ruleForm.isnew">
                                <el-radio :label="1">最热</el-radio>
                                <el-radio :label="2">新品</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="ruleForm.status">
                                <el-radio :label="1">正常</el-radio>
                                <el-radio :label="2">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="商品描述" name="second">
                    <div id="div1" style="height: 400px"></div>
                </el-tab-pane>
            </el-tabs>
            <!-- pid？  title url status type 提交按钮调用接口menuedit或者menuadd -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import E from "wangeditor";
import { getcateList, getCateListByTop, addGoods, editGoods } from '../../apis'
export default {
    props: ["isfoShow", "type"],
    data() {
        return {
            activeName: 'first',
            firstList: [],//一级分类的数据
            secondList: [],//二级分类的数据
            // 上传过的历史文件
            fileList: [],
            isShow: false,
            isEditTo: true,
            //表单数据
            ruleForm: {
                goodsname: '',
                first_cateid: '',
                second_cateid: '',
                price: '',
                market_price: '',
                img: '',
                description: '',
                specsid: '',
                specsattr: '',
                isnew: 1,
                ishot: 1,
                status: 1
            },
            rules: {
                goodsname: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
            },
            editor: null
        }
    },
    watch: {
        isfoShow() {
            this.isShow = true;
        },
    },
    //发请求 获取一级分类数据
    created() {
        this.getFirstlist()
    },
    methods: {
        setVal(data) {
            this.fileList = []; // 清空上次的图片
            this.ruleForm = { ...data };

            // console.log(data); //处理图片的显示
            if (data.img) {
                this.fileList.push({
                    name: 'food.jpeg',
                    url: 'http://localhost:3000' + data.img,
                })
            }
        },
        async getFirstlist() {
            let res = await getcateList()
            this.firstList = res.list;
        },
        async firstChange() {
            //修改一级分类  ,重新获取二级的下拉数据
            // console.log(this.ruleForm.first_cateid);
            let res = await getCateListByTop({ pid: this.ruleForm.first_cateid })
            this.secondList = res.list
        },
        // tab 切换之后在显示
        handleClick() {
            //当值为second时在切换富文本   如果存在不能重复创建
            if (this.activeName == 'second' && !this.editor) {
                this.$nextTick(() => {
                    this.editor = new E("#div1");
                    // 注意，先配置 height ，再执行 create()
                    this.editor.create();
                    // 把富文本编辑器内容给商品描述
                    this.editor.txt.html(this.ruleForm.description)

                });
            }
        },
        // 图片的函数
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
                } 个文件`
            );
        },
        handleChange(file) {
            // console.log(file, fileList);
            // 这里获取了文件
            this.ruleForm.img = file.raw;
        },
        handleRemove() {
            // console.log(file, fileList);
            this.ruleForm.img = ''
        },
        submit() {
            //校验表单  
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {//校验成功 提交数据
                    //获取富文本数据
                    console.log(this.ruleForm);
                    // 只要请求中可能包含图片 就需要将数据类型转为formdata 提交给后台的就是这个类型的数据
                    let fd1 = new FormData();
                    // 现在的fd1是空的 数据来源是ruleForm 需要将ruleForm中的数据存入fd1 并提交
                    // 遍历ruleForm 将数据存入fd1
                    for (const key in this.ruleForm) {
                        fd1.append(key, this.ruleForm[key])
                    }
                    // console.log(this.editor.txt.html);
                    //先判断新增还是修改
                    let res;
                    if (this.type == 'add') {
                        console.log(fd1)
                        res = await addGoods(fd1)

                    } else {
                        res = await editGoods(fd1)
                    }
                    // console.log(res)
                    if (res.code == 200) {
                        this.$emit('update')
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            this.isShow = false;
        },
    }
};
</script>

<style>

</style>